<template>
  <div class="home-page">
    <div class="swiper-container" :style="{'height':swiperHeight+'px'}">
      <div class="sanjiao">
        <img src="../../assets/sanjiao.png" alt="">
        <img src="../../assets/down.png" alt="" class="down-jiantou">
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide box1">
          <div>
            <span><strong>与我们合作</strong><br><br>牛津国际教育集团</span>
            <!--            <span>牛津学院</span>-->

          </div>
        </div>

      </div>
      <!-- Add Pagination -->
      <!--      <div class="swiper-pagination"></div>-->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <div class="main-center">
      <p style="text-align: center;margin-top: 50px;">欢迎访问</p>
      <h1 style="text-align: center;">与我们合作</h1>
      <div class="details">
        <p>在过去的29年里，牛津国际与5000多个招生机构建立了紧密的合作伙伴关系，为来自100个国家的50多万名学生提供教育机会。我们与像我们一样热衷于为每个学生提供最佳体验的招生代理合作，对我们的工作倍感自豪。</p>
        <p>我们的招生团队遍布世界各地，与区域合作伙伴合作，为学生匹配最适合其学术目标的课程。我们与知名的教育代理和顾问、高中和大学海外部门、学校和大学顾问以及负责海外奖学金的政府部门有着密切的工作关系。</p>
        <p>与我们合作，可以保证您的学生将：</p>
        <p>获得激动人心的学习体验；</p>
        <p>获得个性化关注；</p>
        <p>有机会认识来自世界各地的学生。</p>
      </div>
      <!--<div class="fangwen">
        <a href="https://www.oxfordinternational.com/partnering-with-us/agent-application/">与我们合作</a>
      </div>-->
      <div class="details1">
        <p>如您对我们的项目感兴趣，请与我们的招生官取得联系！</p>
        <p style="margin-top: 50px"><strong>大学项目</strong></p>
        <div class="zhanshi">
          <div>
            <p>Cecillia SHEN</p>
            <p>中国区高级招生经理（北区）</p>
            <p>CShen@OxfordInternational.com</p>
          </div>
          <div>
            <p>Katherine CAI</p>
            <p>中国区招生经理（南区）</p>
            <p>kcai@OxfordInternational.com</p>
          </div>
          <div>
            <p>Jimmy JING</p>
            <p>中国区高级招生主任（中区）</p>
            <p>jming@OxfordInternational.com</p>
          </div>
        </div>
        <p style="margin-top: 100px"><strong>中学项目</strong></p>
        <div class="zhanshi1">
          <div>
            <p>Lin SHEN</p>
            <p>中国区招生经理</p>
            <p>lshen@OxfordInternational.com</p>
          </div>
        </div>
        <p></p>
      </div>
    </div>

  </div>
</template>

<script>
  import swiper from '../../assets/swiper/swiper-bundle.min'

  export default {
    name: "index",
    data(){
      return {
        activeName:'first'
      }
    },
    created() {
      let H = window.innerHeight

      this.swiperHeight = H
    },
    mounted() {
      var swiper = new Swiper('.swiper-container', {
        // spaceBetween: 30,
        centeredSlides: true,
        /*autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },*/
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    }
  }
</script>

<style scoped lang="scss">
  .main-center {
    max-width: 1200px;
    margin: 0 auto;
  }

  .swiper-container {
    width: 100%;
    height: 1000px;
    position: relative;
  }

  .sanjiao {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    z-index: 222;

    img {
      width: 120px;
      display: block;
    }

    span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      display: block;
      text-align: center;
      color: #303030;
      z-index: 999;
    }

    .down-jiantou {
      position: absolute;
      left: 50%;
      margin-left: -19px;
      bottom: 9px;
      width: 38px;
      animation: shangxia 0.7s linear infinite;
    }
    @keyframes shangxia {
      0% {bottom: 9px}
      50%{bottom: 3px}
      100%{bottom: 9px}
    }
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide > div:nth-of-type(1) {
    margin: 60px 0;
    margin-bottom: 35px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .65);
    padding: 20px 35px;
  }

  .swiper-slide > div:nth-of-type(1) span:nth-of-type(1) {
    font-size: 27px;
    color: #303030;
    margin-bottom: 20px;
    line-height: 34px;
  }

  .swiper-slide > div:nth-of-type(1) span:nth-of-type(2) {
    font-size: 25px;
    font-weight: bold;
    color: #303030;
  }

  .swiper-slide > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    padding: 10px 40px;
    background: rgba(255, 255, 255, .65);
    transition: all .4s ease;
    cursor: pointer;
  }

  .swiper-slide > div:nth-of-type(2) span {


    line-height: 32px;
    font-size: 18px;
    color: #303030;
  }

  .swiper-slide > div:nth-of-type(2):hover {
    background: #3281c4;
  }

  .box {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .box1 {
    background: url("../../assets/agents/partner-with-us-1.jpg") no-repeat center center;
  }

  .box2 {
    background: url("../../assets/UP-2.jpg") no-repeat center center;
  }

  .box3 {
    background: url("../../assets/UP-3.jpg") no-repeat center center;
  }

  .box4 {
    background: url("../../assets/UP-4.jpg") no-repeat center center;
  }


  .mid {
    margin: 40px auto 40px auto;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 17px;
    line-height: 36px;

    div {
      flex: 1;
      width: 50%;
      margin: 0 30px;
      display: flex;
      flex-direction: column;

      p {
        span {
          font-weight: bold;
        }
      }

      ul {
        display: flex;
        flex-direction: column;

        li {
          /*margin-bottom: 15px;*/

          span {
            font-weight: bold;
          }
        }
      }
    }
  }

  .fangwen {
    text-align: center;
    margin: -50px auto 140px auto;

    a {
      padding: 18px 26px;
      border-radius: 30px;
      background: #303030;
      color: #fff;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    a:hover {
      background: #3281c4;
    }
  }


  .map {
    padding: 45px 0 90px 0;
    background: url("../../assets/oic/map_bg.jpg") no-repeat center center;
    background-size: 100% auto;
  }

  .map > div {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px 25px 30px 30px;
    display: flex;
    flex-direction: row;

    div:nth-of-type(1) {
      margin-right: 20px;

      .biaoji-size {
        display: block;
        width: 60px;
      }
    }

    div:nth-of-type(2) {
      display: flex;
      flex-direction: column;
      padding-bottom: 70px;

      span {
        margin-bottom: 15px;
      }
    }
  }

  .details{
    text-align: center;
    font-size: 18px;
    line-height: 36px;
    color: #303030;
    padding-bottom: 100px;
    a{
      text-decoration: none;
      color: #303030;
    }
  }
  .details1{
    text-align: center;

    max-width: 900px;
    margin: 0 auto;
    margin-top: -70px;
    font-size: 18px;
    line-height: 36px;
    color: #303030;
    padding-bottom: 100px;

    p{
      line-height: 20px;
      margin-top: 30px;
    }
    span{
      line-height: 40px;
      display: block;
      width: 100%;
      font-size: 14px;
    }

    a{
      text-decoration: none;
      color: #303030;
    }
  }
  .zhanshi{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .zhanshi1{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>
